<html>
<!DOCTYPE html>
<head>
    <title>摄像头管理1</title>
		<#include "/header.html">
</head>
<style>
.preview {
    width: 90%;
    padding: 10px;
    padding-top: 0;
    margin-left: 10px;
    border: 1px solid #7F9DB9;
    text-align: center;
}
.preview legend{
    font-size: 12px;
    width: 50px;
}
.preview .btn-wid{
    width: 64px;
}
</style>
<body>
<div id="monitorCameraVue" v-cloak>
    <div style="width: 70%;float: left;" id="leftDiv">
        <div class="panel panel-default" id="ckDiv">
            <div class="panel-heading">播放窗口</div>
            <div style="padding: 10px;">
                <div id="divPlugin" class="plugin"></div>
            </div>
        </div>
    </div>
<!--    <div>-->
        <div class="layui-tab layui-tab-card"  :style="'float: left;width: 27%;margin-left: 2%;overflow:auto;'">
            <ul class="layui-tab-title">
                <li class="layui-this">摄像头列表</li>
                <li>功能操作</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show"><div id="cameraTreeDiv" class="ztree"></div></div>
                <div class="layui-tab-item">
                <div style="padding: 10px">
                        <div>
                            <span>当前选择的摄像头：{{tree.name}}</span>
                        </div>
                        <fieldset class="preview">
                            <legend>功能</legend>
                            <div style="margin:5px 10px 10px;">
                                <div style="padding: 10px 0 20px 10px;">
	                                <div class="col-sm-1" style="line-height: 38px;width: auto;">
	                                	<a class="btn btn-primary" @click="closeCamera()">关闭</a>
	                                	<a class="btn btn-primary" @click="catchPic()">抓图</a>
	                                	<a class="btn btn-primary" @click="dzfd()">{{isOpenDz?"放大关闭":"放大开启"}}</a>
	                                	<a class="btn btn-primary" @click="clickFullScreen()">全屏</a>
	                                </div>
                                    <div class="col-sm-1">
                                        
                                    </div>
                                </div>
                                <div style="padding: 10px 0 20px 10px;">
                                    <div class="col-sm-1" style="line-height: 38px;width: auto;">窗口分割数</div>
                                    <div class="col-sm-1">
                                        <select @change="changeWndNum();" id="splitWind" class="layui-select" >
                                            <option value="1">1x1</option>
                                            <option value="2" selected>2x2</option>
                                            <option value="3">3x3</option>
                                            <option value="4">4x4</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                    <div style="padding: 10px">
                        <fieldset class="preview">
                            <legend>云台控制</legend>
                            <div style="margin:5px 10px 10px;">
                                <input type="button" class="layui-btn layui-btn-normal btn-wid" value="左上" @mousedown="mouseDownPTZControl(5)" @mouseup="mouseUpPTZControl()"/>
                                <input type="button" class="layui-btn layui-btn-normal btn-wid" value="上" @mousedown="mouseDownPTZControl(1)" @mouseup="mouseUpPTZControl()"/>
                                <input type="button" class="layui-btn layui-btn-normal btn-wid" value="右上" @mousedown="mouseDownPTZControl(7)" @mouseup="mouseUpPTZControl()"/>
                            </div>
                            <div style="margin:5px 10px 10px;">
                                <input type="button" class="layui-btn layui-btn-normal btn-wid" value="左" @mousedown="mouseDownPTZControl(3)" @mouseup="mouseUpPTZControl()"/>
                                <input type="button" class="layui-btn layui-btn-normal btn-wid" value="自动" @mousedown="mouseDownPTZControl(9)"/>
                                <input type="button" class="layui-btn layui-btn-normal btn-wid" value="右" @mousedown="mouseDownPTZControl(4)" @mouseup="mouseUpPTZControl()"/>
                            </div>
                            <div style="margin:5px 10px 10px;">
                                <input type="button" class="layui-btn layui-btn-normal btn-wid" value="左下" @mousedown="mouseDownPTZControl(6)" @mouseup="mouseUpPTZControl()"/>
                                <input type="button" class="layui-btn layui-btn-normal btn-wid" value="下" @mousedown="mouseDownPTZControl(2)" @mouseup="mouseUpPTZControl()"/>
                                <input type="button" class="layui-btn layui-btn-normal btn-wid" value="右下" @mousedown="mouseDownPTZControl(8)" @mouseup="mouseUpPTZControl()"/>
                            </div>
                            <div style="margin:5px 10px 10px;">
                                <div style="padding: 10px 0 20px 10px;">
                                    <div class="col-sm-1" style="line-height: 38px;width: auto;">速度</div>
                                    <div class="col-sm-1">
                                        <select class="layui-select" id="ptzspeed" style="width: 60px;">
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option selected>4</option>
                                            <option>5</option>
                                            <option>6</option>
                                            <option>7</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                    <div style="padding: 10px">
                        <fieldset class="preview">
                            <legend>变焦</legend>
                            <div style="margin:5px 10px 10px;">
                                <input type="button" class="layui-btn layui-btn-normal btn-wid" value="变倍+" @mousedown="PTZZoomIn()" @mouseup="PTZZoomStop()"/>
                                <input type="button" class="layui-btn layui-btn-normal btn-wid" value="变倍-" @mousedown="PTZZoomout()" @mouseup="PTZZoomStop()"/>
                            </div>
                            <div style="margin:5px 10px 10px;">
                                <input type="button" class="layui-btn layui-btn-normal btn-wid" value="变焦+" @mousedown="PTZFocusIn()" @mouseup="PTZFoucusStop()"/>
                                <input type="button" class="layui-btn layui-btn-normal btn-wid" value="变焦-" @mousedown="PTZFoucusOut()" @mouseup="PTZFoucusStop()"/>
                            </div>
                            <div style="margin:5px 10px 10px;">
                                <input type="button" class="layui-btn layui-btn-normal btn-wid" value="光圈+" @mousedown="PTZIrisIn()" @mouseup="PTZIrisStop()"/>
                                <input type="button" class="layui-btn layui-btn-normal btn-wid" value="光圈-" @mousedown="PTZIrisOut()" @mouseup="PTZIrisStop()"/>
                            </div>
                        </fieldset>
                    </div>
                   <!-- <div>
                        <fieldset class="preview">
                            <legend>路径选择</legend>
                            <div style="margin:5px 10px 10px;">
                                	抓图保存路径：<input id="previewPicPath" type="text" v-model="previewPicPath" style="width:70%" @click="getCapturePath()"/>
                            </div>
                        </fieldset>
                    </div>-->
                </div>
                </div>
            </div>
        </div>

</div>
<script src="${request.contextPath}/statics/js/modules/monitor/webVideoCtrl.js"></script>
<script src="${request.contextPath}/statics/js/modules/monitor/monitor_camera.js"></script>
</body>
<style>
#clientDiv div table th,#clientDiv div table td{
    text-align: center;
}
</style>
</html>
